<!-- <template>
  <div class="Test">
    <div class="box">
      <div id="parent"
           class="content"
           ref="parent">
      </div>
    </div>
    <input type="text"
           placeholder="">
    <button @click="submit">提交的数据</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'calendar',
  data () {
    return {
      list: [{
        key: 'k0',
        name: '甲方联系地址',
        required: true,
        type: 'text'
      }, {
        key: 'k1',
        name: '乙方联系地址',
        required: true,
        type: 'text'
      }, {
        key: 'k2',
        name: '丙方姓名',
        required: true,
        type: 'text'
      }, {
        key: 'k3',
        name: '丙方身份证',
        required: true,
        type: 'text'
      }, {
        key: 'k4',
        name: '丙方联系地址',
        required: true,
        type: 'text'
      }, {
        key: 'k5',
        name: '丙方联系电话',
        regex: '^[1]{1}[3,4,5,6,7,8,9]{1}[0-9]{9}$',
        required: true,
        type: 'int'
      }, {
        key: 'k6',
        name: '丙方姓名',
        required: true,
        type: 'text'
      }, {
        key: 'k7',
        name: '报名年',
        regex: '^20[1,2,3]{1}[0-9]{1}$',
        maxLength: 4,
        required: true,
        type: 'int'
      }, {
        key: 'k8',
        name: '报名月',
        regex: '^[0,1]{1}[0-9]{1}$',
        maxLength: 2,
        required: true,
        type: 'int'
      }, {
        key: 'k9',
        name: '报名日',
        regex: '^[0,1,2,3]{1}[0-9]{1}$',
        maxLength: 2,
        required: true,
        type: 'int'
      }, {
        key: 'k10',
        name: '丙方付款方式',
        required: true,
        type: 'text'
      }, {
        key: 'k11',
        name: '丙方培训费金额',
        required: true,
        type: 'number'
      }, {
        key: 'k12',
        name: '扣除金额',
        required: true,
        type: 'number'
      }, {
        key: 'k13',
        name: '剩余金额',
        required: true,
        type: 'number'
      }, {
        key: 'k14',
        name: '丙方收款账号名称',
        required: true,
        type: 'text'
      }, {
        key: 'k15',
        name: '丙方银行账号',
        required: true,
        type: 'text'
      }, {
        key: 'k16',
        name: '丙方开户行',
        required: true,
        type: 'text'
      }, {
        key: 'k17',
        name: '丙方付款方式',
        required: true,
        type: 'text'
      }, {
        key: 'k18',
        name: '丙方培训费金额',
        required: true,
        type: 'number'
      }, {
        key: 'k19',
        name: '扣除金额',
        required: true,
        type: 'number'
      }, {
        key: 'k20',
        name: '剩余金额',
        required: true,
        type: 'number'
      }, {
        key: 'k21',
        name: '退回金额',
        required: true,
        type: 'number'
      }, {
        key: 'k22',
        name: '与丙方结算方名称',
        required: true,
        type: 'text'
      },
      {
        key: 'k23',
        name: '与丙方结算方名称',
        required: true,
        type: 'checkbox',
        label: '2'
      },
      {
        key: 'k24',
        name: '与丙方结算方名称',
        required: true,
        type: 'checkbox',
        label: '1'
      }
      ],
      // tmpData: {},
      component: null,
      strHtml: '',
      str: '<p class="MsoNormal" style="text-indent:253.0pt;">	协议号：____（<span>20</span>22 ）第JM0590号<span></span> </p><p class="MsoNormal" style="text-indent:126.5pt;">	<b>退学退款协议书<span></span></b> </p><p class="MsoNormal">	甲方：加马（广州）互联网科技有限公司<span></span> </p><p class="MsoNormal">	联系地址：#{k0}<span></span> </p><p class="MsoNormal">	乙方（培训机构）：广州市粤兴机动车驾驶技术培训有限公司<span></span> </p><p class="MsoNormal">	联系地址：<span>#{k1}</span><span></span> </p><p class="MsoNormal">	丙方（学员）：<span>#{k2}</span><span></span> </p><p class="MsoNormal">	身份证号码：<span>#{k3}</span><span></span> </p><p class="MsoNormal">	联系地址：<span>#{k4}&nbsp; &nbsp; &nbsp;&nbsp;</span>联系电话：<span>#{k5}</span><span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	丙方<span>_<span>#{k6}</span>_&nbsp; </span>于<u><span>&nbsp;&nbsp;<span>#{k7}</span> &nbsp;</span></u><span>&nbsp;</span>年 <u><span>&nbsp;<span>#{k8}</span>&nbsp;&nbsp;</span></u>月<u><span>&nbsp;<span>#{k9}</span>&nbsp;</span></u>日，报名加马（广州）互联网科技有限公司驾驶培训课程，现丙方向甲方提出退学退款申请，甲乙丙已一致达成如下条款：<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	1、甲乙丙三方确认原合同自本协议签订之日起解除，且关于原合同的权利义务已经全部清算完毕。自解除之日起，甲乙丙三方互不承担违约责任，各方日后不得再基于原合同的约定向各方追索责任。<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	2、根据丙方的支付方式在相应项前□内打<span>“ </span>√ <span>”</span>：<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	#{k23}（<span>1</span>）丙方使用<span>_<span>#{k10}</span>_</span>方式向甲方缴纳培训服务费用人民币<span>_<span>#{k11}</span>_</span>元，甲方扣除<span><span>_</span><span>#{k12}</span><span></span><span>_</span></span>元后剩余<span><span>_</span><span>#{k13}</span><span></span><span>_</span></span>元在本协议生效后<span>10</span>个工作日内退回丙方<span>;</span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	丙方收款账户名称：<u> </u><u>&nbsp;<span>#{k14}</span>&nbsp;&nbsp;</u> </p><p class="MsoNormal" style="margin-left:27.95pt;">	账号：<span><span>#{k15}</span>&nbsp; &nbsp; &nbsp; &nbsp;</span>开户行：<span>#{k16}</span><span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	#{k24}（<span>2</span>）丙方使用<span>_<span>#{k17}</span>_</span>分期付款方式向甲方缴纳培训费人民币<span>_<span>#{k18}</span>_</span>元，甲方扣除<span>_<span>#{k19}</span>_</span>元后剩余<span>_<span>#{k20}</span>_</span>元退回<span>_<span>#{k21}</span>_</span>，由<span>_<span>#{k22}</span>_</span>与丙方结算。<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	3、本协议由甲乙双方盖章、丙方签字后生效。原合同解除，原合同三方互不承担违约责任。<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	4、本协议壹式叁份，自各方签名、盖章之日起生效。甲乙丙各执壹份，均具同等法律效力。<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	5、各方就履行本合同产生的争议，应友好协商，协商不成的，各方均有权将争议提交广州市天河区人民法院予以管辖。<span></span> </p><p class="MsoNormal" style="text-indent:24.0pt;">	（以下无正文）<span></span> </p><p class="MsoNormal">	<br /></p><p class="MsoNormal">	甲方：加马（广州）互联网科技有限公司（盖章）<span>&nbsp; </span> </p><p class="MsoNormal">	<br /></p><p class="MsoNormal">	<br /></p><p class="MsoNormal">	乙方：广州市粤兴机动车驾驶技术培训有限公司（盖章）<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> </p><p class="MsoNormal">	<br /></p><p class="MsoNormal">	&nbsp;</p><p class="MsoNormal">	丙方（学员签字）：<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>日期：<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>年<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>月<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>日<span></span> </p>'
    }
  },
  created () {
    this.str = '<div class="son">' + this.str + '</div>'
    let list = this.list
    list.forEach(item => {
      this.str = this.str.replace('#{' + item.key + '}', function () {
        if (item.type === 'checkbox') {
          return `<el-checkbox v-model="tmpData.${item.key}" label="√">''</el-checkbox>`
        } else {
          return `<input  v-model="tmpData.${item.key}"  placeholder="请输入${item.name}" :style="{width:text(tmpData.${item.key})}"/>`
        }
      })
    })
    console.log(this.str)
    var MyComponent = Vue.extend({
      template: this.str,
      data () {
        return {
          tmpData: {}
        }
      },
      computed: {
        text () {
          return function (value) {
            if (!value || (String(value).length * 14) + 20 < 200) {
              return 'auto'
            } else {
              return (String(value).length * 14) + 20 + 'px'
            }
          }
        }
      },
      methods: {
      }
    })
    this.component = new MyComponent().$mount()
  },
  watch: {

  },
  mounted () {
    document.getElementById('parent').appendChild(this.component.$el)
  },
  methods: {
    input () {
      console.log('value')
    },
    submit () {
      console.log(this.component.tmpData)
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: center;
}
.content {
  white-space: pre-wrap;
  width: 1000px;
  background-color: #fff;
  min-height: 80vh;
  padding: 50px;
}
/deep/.el-input {
  width: 200px;
}
/deep/.el-input__inner {
  border: none;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0px;
  background-color: #f7f7f7;
  padding: 0px;
  // width: auto;
}
</style> -->